<div id="app" v-cloak class="login-con page-container">
    <div class="login-dev loading">
        <el-card>
            <div>
                <div style="margin-bottom: 20px;display: flex;justify-content: space-between;align-items: center">
                    <div>
                        <h1 style="line-height: 0px;color: #409EFF;">{$site_name}</h1>
                    </div>
                    <div style="text-align: right;">
                        <span class="login-header-label-active" style="margin-right: 10px;">登录</span>
                    </div>
                </div>
                <el-form size="large" :model="form" label-position="top">
                    <el-form-item prop="username" label="用户名"
                                  :rules="[{ required: true, message: '请输入登录用户名', trigger: 'blur' }]">
                        <el-input placeholder="请输入登录用户名" type="text" v-model="form.username"></el-input>
                    </el-form-item>
                    <el-form-item prop="password" label="密码"
                                  :rules="[{ required: true, message: '请输入登录密码', trigger: 'blur' }]">
                        <el-input placeholder="请输入登录密码" type="password" v-model="form.password"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="password" label="验证码"
                                  :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]">
                        <el-input placeholder="请输入验证码" type="text" v-model="form.valid_code"
                        >
                            <template #append>
                                <el-image v-if="time>0" @click="changeValidEvent" style="width: 80px;height: 30px;"
                                          :src="`/admin/passport/code?time=`+time"></el-image>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="doLogin" style="width: 100%" type="primary">登录
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
    <div class="footer">
        <p>建议分辨率1366*768以上，推荐使用</p>
        <p style="margin-top: 10px;">Firefox浏览器
            <img src="">
            、Chrome浏览器
            <img src="">
            、360极速浏览器
            <img src="">
            、IE11及以上浏览器
            <img src="">
        </p>
        <div class="version">
            <small>当前系统版本号：v {$version}</small>
        </div>
    </div>
</div>
<script>
    const App = {
        el: "#app",
        data() {
            return {
                time: 0,
                form: {
                    username: "",
                    password: ""
                }
            }
        },
        mounted() {
            //如果是在iframe里面，需要跳转到 /admin/passport/login 页面
            if (window.parent !== window) {
                window.parent.location.href = "/admin/passport/login"
            }
            this.time = new Date().getTime()
            window.addEventListener("keydown", this.handleKeyDown, true); //开启监听键盘按下事件
        },
        methods: {
            changeValidEvent() {
                this.time = new Date().getTime()
            },
            handleKeyDown(e) {
                let key = null;
                if (window.event === undefined) {
                    key = e.keyCode;
                } else {
                    key = window.event.keyCode;
                }
                if (key === 13) {
                    //触发的事件
                    this.doLogin();
                }
            },
            doLogin() {
                console.log('doLogin')
                let user_agent = navigator.userAgent
                this.httpPost(`/admin/passport/login`, {time: this.time, ...this.form, user_agent}).then(res => {
                    if (res.status) {
                        this.$message.success(res.msg)
                        setTimeout(() => {
                            location.href = '/admin/index/index'
                        }, 1000)
                    }
                    this.changeValidEvent()
                }).catch(err => {
                    this.changeValidEvent()
                })
            }
        }
    }
</script>
<style>
    .version {
        margin-top: 20px;
    }

    .footer {
        width: 100%;
        z-index: -1;
        font-size: 12px;
        color: #909399;
        line-height: 1.2;
        text-align: center;
        position: absolute;
        bottom: 10px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .login-dev {
        display: inline-block;
        width: 460px;
        margin-top: 5%;
    }

    .login-con {
        min-height: 100%;
        position: fixed;
        width: 100%;
        text-align: center;
        top: 0;
        left: 0;
        background: #f6f7ff;
        background: url(/assets/img/login/login-bg.png) repeat;
    }

    .el-input--large {
        width: 100% !important;
    }
</style>
